<template>
  <div class="curr-page">
    <!-- 左右布局 -->
    <el-container class="curr_container">
      <el-aside width="160px" class="el-aside">
        <el-menu :default-active="default_active">
          <el-menu-item
            v-for="(item, index) in menus"
            :index="index.toString()"
            :key="index"
          >
            <template #title>
              <router-link
                :to="'/userinfo/' + item.to"
                custom
                v-slot="{ navigate }"
              >
                <div @click="navigate">
                  <i :class="item.icon"></i> <span>{{ item.title }}</span>
                </div>
              </router-link>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- main -->
      <el-main>
        <!-- 页头 -->
        <el-page-header @back="goBack" :content="page_header"> </el-page-header>
        <router-view class="router_view"></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        { to: "info", title: "用户信息", icon: "el-icon-user-solid" },
        { to: "collect", title: "我的收藏", icon: "el-icon-star-on" },
        { to: "connect", title: "我的预约", icon: "el-icon-message-solid" },
        { to: "shop", title: "我的店铺", icon: "el-icon-s-shop" },
        { to: "car", title: "我的车辆", icon: "el-icon-s-help" },
        { to: "article", title: "我的帖子", icon: "el-icon-document" },
        { to: "setting", title: "用户设置", icon: "el-icon-s-tools" },
      ],
      page_header: "用户信息",
      default_active: "0",
    };
  },

  watch: {
    $route(to) {
      this.computeRoute(to);
    },
  },

  methods: {
    fetchInitData() {},
    goBack() {
      this.$router.go(-1);
    },

    computeRoute(to) {
      const currUrl = to.fullPath.split("/")[2];
      if (currUrl == "info") {
        this.page_header = "用户信息";
        this.default_active = "0";
      }
      if (currUrl == "collect") {
        this.page_header = "我的收藏";
        this.default_active = "1";
      }
      if (currUrl == "connect") {
        this.page_header = "我的预约";
        this.default_active = "2";
      }
      if (currUrl == "shop") {
        this.page_header = "我的店铺";
        this.default_active = "3";
      }
      if (currUrl == "car") {
        this.page_header = "我的车辆";
        this.default_active = "4";
      }
      if (currUrl == "article") {
        this.page_header = "我的帖子";
        this.default_active = "5";
      }
      if (currUrl == "setting") {
        this.page_header = "用户设置";
        this.default_active = "6";
      }
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },

  created() {
    this.fetchInitData();
  },

  mounted() {
    this.computeRoute(this.$route);
  },
};
</script>

<style lang="scss" scoped>
.curr-page {
  margin: 0 0px;
  padding: 0px;

  .curr_container {
    height: calc(100vh - 90px);

    .el-aside {
      border-right: 1.2px solid #aaa;
      margin-left: 100px;
    }

    .router_view {
      padding: 20px;
    }
  }
}
</style>
